<template>
  <el-container>
    <el-aside width="300px" class="content-left-list">
      <div class="ps-panel nav-left-menu" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-guanxiwajue"></i>
          <span class="ps-panel-head-title">模型信息</span>
        </div>

        <div class="ps-panel-body">
          <el-tree
            :data="labels"
            node-key="id"
            :highlight-current="true"
            default-expand-all
            :expand-on-click-node="false"
            :props="{ label: 'label_name' }"
            @node-click="treeNodeClick"
          ></el-tree>
          <!--<el-menu :default-active="nodeTypes[0].node" class="el-menu-vertical">-->
          <!--<el-menu-item v-for="item of nodeTypes" :index="item.node" :key="item.node" @click="init(item.node)">{{item.node_name}}</el-menu-item>-->
          <!--</el-menu>-->
        </div>
      </div>
    </el-aside>
    <el-main class="content-main">
      <div class="ps-panel nav-left-menu" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-list"></i>
          <span class="ps-panel-head-title">实例列表</span>
          <span class="query">
            <el-button
              type="primary"
              size="mini"
              @click="addModelInstance"
              v-show="this.currModelId > 0"
              >添加实例</el-button
            >
          </span>
        </div>

        <div class="ps-panel-body">
          <el-table
            :data="currModelInstances"
            size="small"
            highlight-current-row
            stripe
            style="width: 100%; margin-bottom: 10px"
          >
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column prop="名称" label="名称"></el-table-column>
            <el-table-column prop="labels" label="模型名称"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="showOrEdit(scope.row)"
                  >编辑/查看</el-button
                >
                <el-popover
                  style="margin-left: 10px"
                  width="160"
                  trigger="manual"
                  :ref="'del_popover_' + scope.row.id"
                >
                  <p style="text-align: center; margin: 15px 0px">
                    确定删除吗？
                  </p>
                  <div style="text-align: center; margin: 0">
                    <el-button
                      size="mini"
                      @click="delPopoverClose('del_popover_' + scope.row.id)"
                    >
                      取消
                    </el-button>
                    <el-button
                      type="primary"
                      size="mini"
                      @click="delInstance(scope.row)"
                      >确定
                    </el-button>
                  </div>
                  <el-button
                    type="text"
                    slot="reference"
                    size="small"
                    @click="delPopoverShow('del_popover_' + scope.row.id)"
                    >删除
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              v-if="paginations.total > 0"
              :page-size="paginations.pageSize"
              :layout="paginations.layout"
              :total="paginations.total"
              :current-page="paginations.pageIndex"
              @current-change="getModelInstances"
              style="text-align: right"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>

    <!--        实例属性详情展示-->
    <el-dialog
      title="实例属性"
      :visible.sync="currModelInstance.visible"
      width="800px"
      class="edit"
    >
      <!--循环展示属性-->
      <el-form
        ref="currModelInstance"
        :model="currModelInstance.data"
        :rules="currModelInstance.rules"
        label-width="100px"
      >
        <el-form-item
          v-for="(itemProperty, index) in currModelProperties"
          :label="itemProperty.display_name"
          :prop="itemProperty.name"
          :key="index"
        >
          <!--                    <el-input :value="value" maxlength="20" placeholder="请输入"></el-input>-->
          <el-input
            v-model="currModelInstance.data[itemProperty.name]"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>

      <!--            <el-form ref="currModelInstance" :model="currModelInstance.data" :rules="currModelInstance.rules"-->
      <!--                     label-width="100px">-->
      <!--                <el-form-item label="名称：" prop="名称">-->
      <!--                    <el-input v-model="currModelInstance.data.名称" maxlength="20" placeholder="请输入名称"></el-input>-->
      <!--                </el-form-item>-->
      <!--                <el-form-item label="高度：" prop="高度">-->
      <!--                    <el-input v-model="currModelInstance.data.高度" maxlength="20" placeholder="请输入高度"></el-input>-->
      <!--                </el-form-item>-->
      <!--            </el-form>-->

      <span slot="footer" class="dialog-footer">
        <el-button @click="currModelInstance.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveModelInstance">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<script>
// import * as d3 from "d3";

// var Neo4jD3 = require('neo4jd3');
export default {
  name: "index",
  data: function () {
    return {
      labels: [],

      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 10, // 页显示多少条
        total: 0, // 总数
        layout: "total, prev, pager, next", // 翻页属性
      },

      // 选中的模型Id和labelName
      currModelId: 0,
      currModelLabelName: "",
      //当前模型的属性信息
      currModelProperties: [],

      //当前选中模型的实例列表
      currModelInstances: [],

      //当前选中的实例信息
      currModelInstance: {
        visible: false,
        rules: {
          名称: [{ required: true, message: "名称不能为空" }],
          // dataType: [{required: true, message: '数据类型不能为空'}],
          // createDate: [{required: true, message: '创建时间不能为空'}]
        },
        data: {},
      },
    };
  },
  methods: {
    mysleep (time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    },

    treeNodeClick (data) {
      this.currModelId = data.id;
      this.currModelLabelName = data.label_name;
      console.log("nnnnnnnnnnnnnnnnnn", this.currModelLabelName);

      //获取模型属性信息
      this.$store.dispatch("ajax", {
        url:
          "services/app-zonghe/api/dicLabelProperties?labelId.equals=" +
          this.currModelId +
          "&paged=false",
        method: "get",
        data: {},
        succeed: (res) => {
          // //异步执行 所有方法默认都是异步执行
          // this.mysleep(3000).then(() => {
          //     //code 添加三秒后执行的逻辑
          //     console.log('sleep 30 .............');
          // })

          // //执行函数内部同步执行 外面为异步
          // (async function(sleepFunc) {
          //     console.log('Do some thing, ' + new Date());
          //     await sleepFunc(3000);
          //     console.log('Do other things, ' + new Date());
          // })(this.mysleep);

          // //同步执行
          // await this.mysleep(3000).then(() => {
          //     //code 添加三秒后执行的逻辑
          //     console.log('sleep 30 .............');
          // })

          this.currModelProperties = res;
          console.log("get properties: ", this.currModelProperties);
        },
      });

      this.getModelInstances(1);
    },

    getModelInstances (pageIndex) {
      //获取当前选中模型的实例
      if (pageIndex === undefined) {
        pageIndex = this.paginations.pageIndex;
      } else {
        this.paginations.pageIndex = pageIndex;
      }

      this.$store.dispatch("ajaxEx", {
        url:
          "services/app-zonghe/api/example/cypher/nodes/" +
          this.currModelLabelName,
        method: "get",
        data: { page: pageIndex - 1, size: this.paginations.pageSize },
        succeed: (res) => {
          console.log("333333333333333333333", res.headers["x-total-count"]);
          this.currModelInstances = res.data;
          this.paginations.total = parseInt(res.headers["x-total-count"]);
        },
      });
    },
    showOrEdit (row) {
      console.log("show or edit instance ................. ", row);

      this.currModelInstance.visible = true;
      this.currModelInstance.data = this.clone(row);
    },
    //删除模型
    delInstance (row) {
      console.log(
        "del instance ................. ",
        row,
        this.currModelLabelName
      );
      // this.delPopoverClose('del_popover_'+row.id);
      this.$store.dispatch("ajax", {
        url:
          "services/app-zonghe/api/example/cypher/nodes/" +
          this.currModelLabelName +
          "/" +
          row.id,
        method: "delete",
        data: {},
        succeed: () => {
          this.$message.success("删除成功");
          this.delPopoverClose("del_popover_" + row.id);
          console.log(this.currModelInstances);
          if (this.currModelInstances.length == 1) {
            this.paginations.pageIndex--;
            this.getModelInstances();
          }

        },
      });
    },
    addModelInstance () {
      this.currModelInstance.visible = true;
      this.currModelInstance.data = {
        id: 0,
        labels: [this.currModelLabelName],
      };
    },
    saveModelInstance () {
      this.$refs.currModelInstance.validate((valid) => {
        if (valid) {
          if (this.currModelInstance.data.id === 0) {
            this.$store.dispatch("ajax", {
              url:
                "services/app-zonghe/api/example/cypher/nodes/" +
                this.currModelLabelName,
              method: "post",
              data: this.currModelInstance.data,
              succeed: () => {
                this.getModelInstances();
                this.$message.success("保存成功");
                this.currModelInstance.visible = false;
                this.$refs.currModelInstance.resetFields();
              },
            });
          } else {
            // this.currModelInstance.data['labels'].push('BBB测试模型');
            // console.log('update ....: ', this.currModelInstance.data)
            this.$store.dispatch("ajax", {
              url:
                "services/app-zonghe/api/example/cypher/nodes/" +
                this.currModelLabelName,
              method: "put",
              data: this.currModelInstance.data,
              succeed: () => {
                this.getModelInstances();
                this.$message.success("保存成功");
                this.currModelInstance.visible = false;
                this.$refs.currModelInstance.resetFields();
              },
            });
          }
        }
      });
    },

    delPopoverShow (ref) {
      this.$refs[ref].doShow();
    },
    delPopoverClose (ref) {
      this.$refs[ref].doClose();
    },

    //

    checkType (any) {
      return Object.prototype.toString.call(any).slice(8, -1);
    },
    clone (any) {
      let retType = this.checkType(any);
      if (retType === "Object") {
        // 拷贝对象
        let o = {};
        for (let key in any) {
          o[key] = this.clone(any[key]);
        }
        return o;
      } else if (retType === "Array") {
        // 拷贝数组
        var arr = [];
        for (let i = 0, leng = any.length; i < leng; i++) {
          arr[i] = this.clone(any[i]);
        }
        return arr;
      } else if (retType === "Function") {
        // 拷贝函数
        return new Function("return " + any.toString()).call(this);
      } else if (retType === "Date") {
        // 拷贝日期
        return new Date(any.valueOf());
      } else if (retType === "RegExp") {
        // 拷贝正则
        return new RegExp(any);
      } else if (retType === "Map") {
        // 拷贝Map 集合
        let m = new Map();
        any.forEach((v, k) => {
          m.set(k, this.clone(v));
        });
        return m;
      } else if (retType === "Set") {
        // 拷贝Set 集合
        let s = new Set();
        for (let val of any.values()) {
          s.add(this.clone(val));
        }
        return s;
      }
      return any;
    },

    initLabels () {
      this.$store.dispatch("ajax", {
        url: "services/app-zonghe/api/dicLabel/tree?type.notEquals=5",
        method: "get",
        succeed: (res) => {
          this.labels = res;
        },
      });
    },
  },
  mounted () {
    this.initLabels();
  },
};
</script>
